<div class="refund-pend-review">
  <!--确认弹窗-->
  <p-confirmDialog acceptLabel="确认" rejectLabel="取消"></p-confirmDialog>
  <!--消息提示-->
  <p-messages  [closable]="true" [style]="{'position':'fixed','left': '10vw', 'top': '0','margin-top': '0','width': '100vw','z-index':'9999'}"></p-messages>
  <!--顶部按钮-->
  <div class="refund-pend-review-header">
    <div class=" ui-g-12">
      <div class="ui-g-1 refund-pend-review-header-btn refund-pend-review-header-btn-delete" (click)="refundPendReviewClick()">
        <!--<img class="refund-pend-review-header-img-delete" src="assets/images/ic_delete.png" alt="">-->
        <span>审 核</span>
      </div>
      <div style="margin-top: 4.5vh;font-size: 0.875rem;margin-left: 1vw">
        <label style="color: #fff;margin-left: 0.5vw" >小区：</label>
        <p-dropdown [options]="SearchOption.village" scrollHeight="100px" placeholder="请选择小区..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">地块：</label>
        <p-dropdown [options]="SearchOption.region" scrollHeight="100px" placeholder="请选择地块..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">楼栋：</label>
        <p-dropdown [options]="SearchOption.building" scrollHeight="100px" placeholder="请选择楼栋..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">单元：</label>
        <p-dropdown [options]="SearchOption.unit"  scrollHeight="100px" placeholder="请选择单元..."></p-dropdown>
        <label style="color: #fff;margin-left: 0.5vw">房间：</label>
        <p-dropdown [options]="SearchOption.room"  scrollHeight="100px" placeholder="请选择房间..."></p-dropdown>
      </div>
    </div>
    <!--//搜索-->
    <div class="ui-inputgroup refund-pend-review-header-search">
      <input type="text" pInputText placeholder="请输入电话或房间号" style="width: 7vw" [(ngModel)]="refundPendReviewSeachData">
      <button id="disabled-btn" class="refund-pend-review-header-btn-search" type="button"  (click)="refundPendReviewSearchClick()"  label="搜索">搜索</button>
    </div>
  </div>
  <!--表格-->
  <div class="refund-pend-review-table">
    <p-scrollPanel [style]="{width:'100%',height: '95%'}" styleClass="custombar">
      <p-table [columns]="refundPendReviewTableTitle" [value]="refundPendReviewTableContent"  [(selection)]="refundPendReviewSelect" (onRowSelect)="refundPendReviewonRowSelect($event)">
        <ng-template pTemplate="header" let-columns>
          <tr >
            <th style="width: 3em"  [ngStyle]="this.refundPendReviewTableTitleStyle">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th *ngFor="let col of columns"  [ngStyle]="this.refundPendReviewTableTitleStyle">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
          <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=1" [ngStyle]="{'background':'#33353C','color':'#DEDEDE','text-align': 'center','height':'2vw'}">
            <td>
              <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td  *ngFor="let col of columns.slice(0,columns.length-1);" >
              <span *ngIf="col.field === 'actualMoneyCollection'">￥</span>{{rowData[col.field]}}
            </td>
            <td>
              <button class="refund-pend-review-table-Btn" (click)="refundPendReviewDetailClick(rowData)">详情</button>
            </td>
          </tr>
          <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=0" [ngStyle]="{'background':'#2E3037','color':'#DEDEDE','text-align': 'center','height':'2vw'}">
            <td>
              <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td  *ngFor="let col of columns.slice(0,columns.length-1)" >
              <span *ngIf="col.field === 'actualMoneyCollection'">￥</span>{{rowData[col.field]}}
            </td>
            <td >
              <button class="refund-pend-review-table-Btn" (click)="refundPendReviewDetailClick(rowData)">详情</button>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </p-scrollPanel>

  </div>
  <!--详情弹窗-->
  <p-dialog header="详细信息" [(visible)]="refundPendReviewDetailDialog" [width]="800">
    <!--Content-->
    <p-scrollPanel [style]="{width:'100%',height: '70vh'}" styleClass="custombar">
      <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label >组织名称：</label>
          </div>
          <div class="ui-g-8">
            <span>{{refundPendReviewDetail.organizationName}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label >小区名称：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.villageName}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>地块名称：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.regionName}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>楼栋：</label>
          </div>
          <div class="ui-g-8">
            <span>{{refundPendReviewDetail.buildingName}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>单元名称：</label>
          </div>
          <div class="ui-g-8">
            <span>{{refundPendReviewDetail.unitName}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>房屋编号：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.roomCode}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>客户名称：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.surname}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>住房大小：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.roomSize}}平米</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>项目名称：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.chargeName}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>实收金额：</label>
          </div>
          <div class="ui-g-8" >
            <span>￥{{refundPendReviewDetail.actualMoneyCollection}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>抵扣金额：</label>
          </div>
          <div class="ui-g-8" >
            <span>￥{{refundPendReviewDetail.mortgageAmount}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>抵扣原因：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.reasonForDeduction}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>可退还金额：</label>
          </div>
          <div class="ui-g-8" >
            <span>￥{{refundPendReviewDetail.refundableAmount}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>收费单位：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.chargeUnit}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>缴费人手机号：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.payerPhone}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>缴费人姓名：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.payerName}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>支付方式：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.paymentMethod}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>支付类型：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{paymentTypeDetail}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>退款状态：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundStatusDetail}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>开始时间：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.startTime}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>结束日期：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.dueTime}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>延迟时长：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.delayTime}}天</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>延期原因：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.delayReason}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>责任人：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.personLiable}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>责任人电话：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.personLiablePhone}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>负责机构：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.responsibleAgencies}}</span>
          </div>
        </div>
        <div class="ui-g-6">
          <div class="ui-g-4">
            <label>申请退款备注：</label>
          </div>
          <div class="ui-g-8" >
            <span>{{refundPendReviewDetail.remark}}</span>
          </div>
        </div>
      </div>
    </p-scrollPanel>

    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="refund-pend-review-dialog-Btn refund-pend-review-dialog-Btn-false"  (click)="refundPendReviewDetailDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <p-dialog header="审核" [(visible)]="refundPendReviewDialog" [width]="500">
    <!--Content-->
    <div class="ui-g ui-fluid">
      <div class="ui-g-12">
        <div class="ui-g-4">
          <label >审核状态：</label>
        </div>
        <div class="ui-g-8">
          <p-radioButton type="radio" label="通过"  value="通过" name="group"  [(ngModel)]="reviewStatus"></p-radioButton>
          <p-radioButton type="radio" label="不通过"  value="不通过" name="group" [ngStyle]="{'margin-left':'3vw'}" [(ngModel)]="reviewStatus"></p-radioButton>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="refund-pend-review-dialog-Btn refund-pend-review-dialog-Btn-sure" (click)="refundPendReviewSureClick()">确定</button>
        <button class="refund-pend-review-dialog-Btn refund-pend-review-dialog-Btn-false"  (click)="refundPendReviewDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <rbi-paging [option]="option" (pageClick)="nowpageEventHandle($event)"></rbi-paging>
  <rbi-loading [hidden]="loadingHide" style="position: absolute;left: 45vw;top:40vh;z-index: 99999"></rbi-loading>
</div>
